import {
  TooltipRoot,
  TooltipTrigger,
  TooltipContent,
  Button,
} from "@design-system/headless";
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";

<Meta
  title="Design-system/Headless/Tooltip"
  component={TooltipRoot}
  args={{
    open: undefined,
    onOpenChange: undefined,
  }}
/>

export const Template = (args) => {
  return (
    <TooltipRoot {...args}>
      <TooltipTrigger>
        <Button>My trigger</Button>
      </TooltipTrigger>
      <TooltipContent>My tooltip</TooltipContent>
    </TooltipRoot>
  );
};

# Tooltip

A tooltip is a small pop-up that appears when a user places their cursor over an element such as a link or button. Tooltips can be used to provide users with additional information about an element without having to clutter up the UI with additional text.

<Canvas>
  <Story name="Tooltip">{Template.bind({})}</Story>
</Canvas>

<ArgsTable story="Tooltip" of={TooltipRoot} />

# Placement

The placement of the tooltip can be changed by passing the `placement` prop.

<Canvas>
  <Story name="Tooltip placement">
    <TooltipRoot placement="left">
      <TooltipTrigger>
        <Button>Left</Button>
      </TooltipTrigger>
      <TooltipContent>My tooltip</TooltipContent>
    </TooltipRoot>
    <TooltipRoot placement="top">
      <TooltipTrigger>
        <Button>Top</Button>
      </TooltipTrigger>
      <TooltipContent>My tooltip</TooltipContent>
    </TooltipRoot>
    <TooltipRoot placement="bottom">
      <TooltipTrigger>
        <Button>Bottom</Button>
      </TooltipTrigger>
      <TooltipContent>My tooltip</TooltipContent>
    </TooltipRoot>
    <TooltipRoot placement="right">
      <TooltipTrigger>
        <Button>Right</Button>
      </TooltipTrigger>
      <TooltipContent>My tooltip</TooltipContent>
    </TooltipRoot>
  </Story>
</Canvas>

# Disabled

If the trigger is disabled, the tooltip will not be displayed.

<Canvas>
  <Story name="Tooltip disabled">
    <TooltipRoot>
      <TooltipTrigger>
        <Button isDisabled>Disabled</Button>
      </TooltipTrigger>
      <TooltipContent disabled>My tooltip</TooltipContent>
    </TooltipRoot>
  </Story>
</Canvas>
